import React from 'react'

const Info = () => {
    const navigate = React.$Router.useNavigate()

    const [searchParams, setSearchParams] = React.$Router.useSearchParams()

    const [id, setId] = React.useState(searchParams.get('id'))

    const [cate, setCate] = React.useState({})

    const [before, setBefore] = React.useState({ name: '' })

    const [after, setAfter] = React.useState({})

    const [cateid, setCateid] = React.useState(id)

    const [count, setCount] = React.useState(0)

    const [description, setDescription] = React.useState('')

    const [starstatus, setStarstatus] = React.useState(0)

    const [LoginAuth, setLoginAuth] = React.useState(React.$Cookies.load('LoginAuth')?React.$Cookies.load('LoginAuth'):{})

    React.useEffect(() => {
        getInfo()
    }, [cateid])

    const getInfo = async () => {
        let result = await React.$Api.InfoData({ id: cateid,busid:LoginAuth.id})

        if (result) {
            if (result.code === 1) {
                setCate(result.data.cate)
                let description = document.querySelector('#description');
                description.innerHTML = result.data.cate.description
                setBefore(result.data.before)
                setAfter(result.data.after)
                setCount(result.data.count)
                setStarstatus(result.data.star)
            }
        } else {
            React.$Vant.Toast({
                type: 'fail',
                message: result.msg,
                onClose: () => {
                    navigate(-1)
                }
            })
        }
    }

    const collection = async()=>{
        if(JSON.stringify(LoginAuth)==='{}'){
            React.$Vant.Toast.fail('请先登录')
            return false
        }

        let data = {
            busid: LoginAuth.id,
            cateid:cateid
        }

        let result = await React.$Api.CateCollection(data);

        if(result.code===1){
            if(result.data==1){
                setStarstatus(result.data)
            }else{
                setStarstatus(result.data)
            }
        }
    }

    const toBefore = () => {
        let id = Number(cateid) - 1
        if (id == 0) {
            id = 1
            return false
        }
        setCateid(id)
    }

    const toAfter = () => {
        let id = Number(cateid) + 1
        if (id > count) {
            id = count
            return false
        }
        setCateid(id)
    }

    const Star = () => {
        if (starstatus == '0') {
            return (
                <div onClick={collection}>
                    <React.$Icons.StarO />收藏
                </div>
            )
        } else {
            return (
                <div onClick={collection}>
                    <React.$Icons.Star  />收藏
                </div>
            )
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title="文章详情"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />

            <div class="rem2"></div>
            <div class="xs_Xiangq">
                <div class="bt">
                    <h2>{cate.name}</h2>
                    <div class="text">
                        <span>{cate.createtime_text}</span>
                        <span>文章来源：慧鑫</span>
                    </div>
                </div>
                <div class="wom_de">
                    <p id='description'></p>
                    <img height={200} src={cate.image_cdn} alt="" />
                </div>
                <div class="niming_sq niming_sq_xs_xq">
                    <a>
                        <Star></Star>
                    </a>
                </div>
            </div>

            <div class="rem2"></div>
            <div class="shangxia_piab">
                <p>上一篇：<a onClick={toBefore} >{before && before.name?before.name:'到顶了'}</a></p>
                <p>下一篇：<a onClick={toAfter} >{after && after.name?after.name:'到底了'}</a></p>
            </div>
        </>
    )
}

export default Info